import React from 'react'
import {Button, Divider, Statistic} from "antd";
import "./style/index.css";
export default class CompoundClazzComp extends React.Component{
    
    state = {
        up:0,
        down:0
    }

    change = (type)=>{
        debugger;
        switch(type){
            case "up":
                this.setState({up:this.state.up+1});
                break;
            case "down":
                 this.setState({down:this.state.down+1});
                 break;
            default:break;
        }
    }
    
    render(){
        let total = this.state.up+this.state.down;
        return (
            <>
            <div className={'container'}>
                <h2>React是很棒的框架</h2>
                <div>
                    <Statistic title={'人数统计'} num={total}/>
                </div>
            </div>
                <Divider/>
                <CompoundMain up={this.state.up} down={this.state.down }/>
                <CompoundFooter change={this.change}/>
            </>
        )
    }

}

class CompoundMain extends React.Component{

    static defaultProps={
        up:0,
        down:0
    }

    render(){

        const {up,down} = this.props;

        return (
            <>
                <div className={'line'}>
                    <div>支持人数:
                        {up}
                    </div>
                </div>
                <div className={'line'}>
                    <div>反对人数:
                        {down}
                    </div>
                </div>
            </>
        )
    }
}


class CompoundFooter extends React.Component{
    render(){

        const {change} = this.props;



        return (
            <>
                <div className={'line'} style={{marginTop:'20px'}}>
                    <Button type={'primary'} style={{marginRight:'20px'}} onClick={change.bind(null,'up')}>支持 </Button>

                    <Button type={'primary'} danger onClick={change.bind(null,'down')}>反对</Button>
                </div>
            </>
        )
    }
}